<!doctype html>
<html lang="en"xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <title>Tiny Dashboard - A Bootstrap Dashboard Template</title>
    <!-- Simple bar CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/simplebar.css}">
    <!-- Fonts CSS -->
    <!--    <link href="https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">-->
    <!-- Icons CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/feather.css}">
    <link rel="stylesheet" th:href="@{/dash/css/select2.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dropzone.css}">
    <link rel="stylesheet" th:href="@{/dash/css/uppy.min.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.steps.css}">
    <link rel="stylesheet" th:href="@{/dash/css/jquery.timepicker.css}">
    <link rel="stylesheet" th:href="@{/dash/css/quill.snow.css}">
    <link rel="stylesheet" th:href="@{/dash/css/dataTables.bootstrap4.css}">
    <!-- Date Range Picker CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/daterangepicker.css}">
    <!-- App CSS -->
    <link rel="stylesheet" th:href="@{/dash/css/app-light.css}" id="lightTheme">
    <link rel="stylesheet" th:href="@{/dash/css/app-dark.css}" id="darkTheme" disabled>
  </head>
  <body class="vertical  light  ">
    <div class="wrapper">
      <nav th:replace="~{comm/blank::topnav}"/>
      <aside th:replace="~{comm/blank::aside}"/>
      <main role="main" class="main-content">
        <div class="container-fluid">
          <div class="row justify-content-center">
            <div class="col-12">
                <h2 class="h3 mb-3 page-title">销售情况</h2>
                <div class="row">
                    <div class="col-md-6 col-xl-3 mb-4">
                        <div class="card shadow bg-primary text-white border-0">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-3 text-center">
                          <span class="circle circle-sm bg-primary-light">
                            <i class="fe fe-16 fe-shopping-bag text-white mb-0"></i>
                          </span>
                                    </div>
                                    <div class="col pr-0">
                                        <p class="small text-muted mb-0">月总收入</p>
                                        <span class="h3 mb-0 text-white">￥[[${monthProfit}]]</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3 mb-4">
                        <div class="card shadow border-0">
                            <div class="card-body" >
                                <div class="row align-items-center">
                                    <div class="col-3 text-center">
                          <span class="circle circle-sm bg-primary">
                            <i class="fe fe-16 fe-shopping-cart text-white mb-0"></i>
                          </span>
                                    </div>
                                    <div class="col pr-0">
                                        <p class="small text-muted mb-0"><strong>月净利润</strong></p>
                                        <span class="h3 mb-0">￥[[${monthNetProfile}]]</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3 mb-4">
                        <div class="card shadow border-0">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-3 text-center">
                          <span class="circle circle-sm bg-primary">
                            <i class="fe fe-16 fe-filter text-white mb-0"></i>
                          </span>
                                    </div>
                                    <div class="col">
                                        <p class="small text-muted mb-0">月成本</p>
                                        <div class="row align-items-center no-gutters">
                                            <div class="col-auto">
                                                <span class="h3 mr-2 mb-0">￥[[${monthPurchaseCost}]]</span>
                                            </div>
                                            <div class="col-md-12 col-lg">
                                                <div class="progress progress-sm mt-2" style="height:3px">
                                                    <div class="progress-bar bg-success" role="progressbar" style="width: 87%" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3 mb-4">
                        <div class="card shadow border-0">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-3 text-center">
                          <span class="circle circle-sm bg-primary">
                            <i class="fe fe-16 fe-activity text-white mb-0"></i>
                          </span>
                                    </div>
                                    <div class="col">
                                        <p class="small text-muted mb-0">月损耗</p>
                                        <span class="h3 mb-0">￥[[${monthLoss}]]</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              <div class="row mb-4 items-align-center">
                <div class="col-md">
                  <ul class="nav nav-pills justify-content-start">
                    <li class="nav-item">
                      <a class="nav-link active bg-transparent pr-2 pl-0 text-primary" href="#">销售
                          <span class="badge badge-pill bg-primary text-white ml-2" th:text="${indentItems.size()}"></span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link text-muted px-2" href="/dashboard/stock">库存
                          <span class="badge badge-pill bg-white border text-muted ml-2"></span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link text-muted px-2" href="/dashboard/loss">损耗
                          <span class="badge badge-pill bg-white border text-muted ml-2"> </span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link text-muted px-2" href="#">盈亏
                          <span class="badge badge-pill bg-white border text-muted ml-2"> </span></a>
                    </li>
                  </ul>
                </div>
                <div class="col-md-auto ml-auto text-right">
                  <span class="small bg-white border py-1 px-2 rounded mr-2 d-none d-lg-inline">
<!--                    <a href="#" class="text-muted"><i class="fe fe-x mx-1"></i></a>-->
                    <span class="text-muted">订单总金额 : <strong>9999</strong></span>
                  </span>
                  <span class="small bg-white border py-1 px-2 rounded mr-2 d-none d-lg-inline">
                    <a href="#" class="text-muted"><i class="fe fe-x mx-1"></i></a>
                      <span class="text-muted"><strong id="time-limit">2020-12-01 - 2020-12-31</strong></span>
                  </span>
                  <button type="button" class="btn" data-toggle="modal" data-target=".modal-slide"><span class="fe fe-filter fe-16 text-muted"></span></button>
                  <button type="button" class="btn"><span class="fe fe-refresh-ccw fe-16 text-muted"></span></button>
                </div>
              </div>
              <!-- Slide Modal -->
              <div class="modal fade modal-slide" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title" id="defaultModalLabel">过滤条件</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="fe fe-x fe-12"></i>
                      </button>
                    </div>
                    <div class="modal-body">
                      <div class="p-2">
                          <div class="form-row">
                              <p class="mb-2"><strong>按商品名搜索</strong></p>
                              <input id="item-name" type="text" class="form-control" placeholder="商品名">
                          </div>
                        <div class="form-group my-4">
                          <p class="mb-2"><strong>分类</strong></p>
                          <label for="multi-select2" class="sr-only"></label>
                          <select class="form-control select2-multi" id="multi-select2">
                            <optgroup label="可点击选择多个分类" class="type">
<!--                              <th:block th:if="${not (types==null) or types.isEmpty()}" th:each="type:${types}">-->
                              <th:block th:if="${types!=null}" th:each="type:${types.entrySet()}">
                                <option class="typeItem" th:value="${type.key}" th:text="${type.value}" ></option>
                              </th:block>
                            </optgroup>
                          </select>
                        </div> <!-- form-group -->

                          <div class="form-row">
                              <p class="mb-2"><strong>按订单创建时间过滤</strong></p>
                          </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="startTime1">起始时间</label>
                                <input class="form-control" id="startTime1" type="date" name="date" value="2000-01-01">
                            </div>
                          <div class="form-group col-md-6">
                            <label>起始时间</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <div class="input-group-text"><span class="fe fe-clock fe-16"></span></div>
                              </div>
                              <input class="form-control" type="time" id="startTime2" name="time" value="00:00">
                            </div>
                          </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="endTime1">截止时间</label>
                                <input class="form-control" id="endTime1" type="date" name="date" value="2222-12-30">
                            </div>
                          <div class="form-group col-md-6">
                            <label>截止时间</label>
                            <div class="input-group">
                              <div class="input-group-prepend">
                                <div class="input-group-text"><span class="fe fe-clock fe-16"></span></div>
                              </div>
                              <input class="form-control" type="time" id="endTime2" name="time" value="00:00">
                            </div>
                          </div>
                        </div>
                          <div class="form-group my-4">
                              <p class="mb-2">
                                  <strong>降序</strong>
                              </p>
                              <div class="custom-control custom-radio">
                                  <input type="checkbox" id="sales-desc" class="custom-control-input">
                                  <label class="custom-control-label" for="sales-desc">销量降序</label>
                              </div>
                          </div>
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" id="filter-type-btn" class="btn mb-2 btn-info btn-block">按商品分类查询</button>
                      <button type="button" id="submit" class="btn mb-2 btn-primary btn-block">按销售记录查询</button>
                      <button type="button" class="btn mb-2 btn-secondary btn-block">重置</button>
                    </div>
                  </div>
                </div>
              </div>
              <table class="table border table-hover bg-white" id="sales-table">
                <thead>
                  <tr role="row">
                    <th>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="all">
                        <label class="custom-control-label" for="all"></label>
                      </div>
                    </th>
                    <th><strong>分类</strong></th>
                    <th><strong>销售数量</strong></th>
                    <th><strong>销售额</strong></th>
                    <th><strong>最近购买时间</strong></th>
                    <th><strong>更多</strong></th>
                  </tr>
                </thead>
                <tbody>
                <th:block th:if="${indentItems!=null}" th:each="item:${indentItems}">
                  <tr>
                    <td class="align-center">
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input">
                        <label class="custom-control-label"></label>
                      </div>
                    </td>
                    <td th:text="${types.get(item.itemType)}"></td>
                    <td th:text="${item.count}"></td>
                    <td th:text="${item.priceSell}"></td>
                    <td th:text="${#temporals.format(item.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
<!--                    <td><span class="dot dot-lg bg-success mr-2"></span></td>-->
                    <td>
                      <div class="dropdown">
                        <button class="btn btn-sm dropdown-toggle more-vertical" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="text-muted sr-only">Action</span>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right">
                          <a class="dropdown-item" href="#">Edit</a>
                          <a class="dropdown-item" href="#">Remove</a>
                          <a class="dropdown-item" href="#">Assign</a>
                        </div>
                      </div>
                    </td>
                  </tr>
                </th:block>
                </tbody>
              </table>
              <nav aria-label="Table Paging" class="my-3" id="foot-page">
                <th:block th:if="${page != null}">
                  <input type="hidden" th:value="${page.current}" id="curPage">
                <ul class="pagination justify-content-end mb-0">
                  <li class="page-item">
                    <a class="page-link" th:if="${page.current > 1}" th:href="@{'?pageNum='+${page.current -1}}">上一页</a>
                  </li>
<!--                  <li class="page-item"><a class="page-link" href="#">1</a></li>-->
<!--                  <li class="page-item active"><a class="page-link" href="#">2</a></li>-->
<!--                  <li class="page-item"><a class="page-link" href="#">3</a></li>-->
                  <li class="page-item">
                    <a class="page-link" th:if="${page.current < ((page.total/page.size)+1)}" th:href="@{'?pageNum='+${page.current +1}}">
                      下一页</a></li>
                </ul>
                </th:block>
              </nav>
            </div>
          </div> <!-- .row -->
        </div> <!-- .container-fluid -->
        <div th:replace="~{comm/blank::modal1}"/>
        <div th:replace="~{comm/blank::modal2}"/>
          <div th:replace="~{item-pick::cartModal}"/>
      </main> <!-- main -->
    </div> <!-- .wrapper -->
    <script th:src="@{/dash/js/jquery.min.js}"></script>
    <script th:src="@{/dash/js/popper.min.js}"></script>
    <script th:src="@{/dash/js/moment.min.js}"></script>
    <script th:src="@{/dash/js/bootstrap.min.js}"></script>
    <script th:src="@{/dash/js/simplebar.min.js}"></script>
    <script th:src='@{/dash/js/daterangepicker.js}'></script>
    <script th:src='@{/dash/js/jquery.stickOnScroll.js}'></script>
    <script th:src="@{/dash/js/tinycolor-min.js}"></script>
    <script th:src="@{/dash/js/config.js}"></script>
    <script th:src="@{/dash/js/d3.min.js}"></script>
    <script th:src="@{/dash/js/topojson.min.js}"></script>
    <script th:src="@{/dash/js/datamaps.all.min.js}"></script>
    <script th:src="@{/dash/js/datamaps-zoomto.js}"></script>
    <script th:src="@{/dash/js/datamaps.custom.js}"></script>
    <script th:src="@{/dash/js/Chart.min.js}"></script>
    <script th:src='@{/dash/js/jquery.dataTables.min.js}'></script>
    <script th:src='@{/dash/js/dataTables.bootstrap4.min.js}'></script>
    <script th:src="@{/dash/js/jquery.stickOnScroll.js}"></script>
    <script th:src="@{/dash/js/gauge.min.js}"></script>
    <script th:src="@{/dash/js/jquery.sparkline.min.js}"></script>
    <script th:src="@{/dash/js/apexcharts.min.js}"></script>
    <script th:src="@{/dash/js/apexcharts.custom.js}"></script>
    <script th:src='@{/dash/js/jquery.mask.min.js}'></script>
    <script th:src='@{/dash/js/select2.min.js}'></script>
    <script th:src='@{/dash/js/jquery.steps.min.js}'></script>
    <script th:src='@{/dash/js/jquery.validate.min.js}'></script>
    <script th:src='@{/dash/js/jquery.timepicker.js}'></script>
    <script th:src='@{/dash/js/dropzone.min.js}'></script>
    <script th:src='@{/dash/js/uppy.min.js}'></script>
    <script th:src='@{/dash/js/quill.min.js}'></script>
    <script th:src="@{/js/handle/cart.js}"></script>
    <script th:src="@{/js/handle/init-price.js}"></script>
    <script>

        $(function(){
          //init
          const types = $('.type').find(".typeItem")
          const arr = []
          let idx = 0;
          while (idx < types.length) {
            let tmp = types[idx++]
            let typeTmp = {"id":"", "name":""}
            // console.log(tmp)
            typeTmp["id"]=tmp.value
            typeTmp["name"]=tmp.innerText
            // console.log(typeTmp)
            arr.push(typeTmp)
            // console.log(tmp.innerText)
          }
          console.log(arr)

            $('#filter-type-btn').click(function (){
                console.log($('#curPage').val())
                console.log($('#startTime1').val()+' '+$('#startTime2').val())
                console.log($('#endTime1').val()+' '+$('#endTime2').val())
                //×用复制的 不是x
                let text = $('.selection').find('.select2-selection__choice').text().split('×')
                text.splice(0,1)
                console.log(text)
                let res = []
                for (let i = 0;i < text.length;i++){
                    for (const a in arr) {
                        if (arr[a].name==text[i]){
                            //只要id
                            res.push(arr[a].id)
                            break
                        }
                    }
                }
                res=res.map(Number)
                console.log(res)
                const curPage = $('#curPage').val()
                const start = $('#startTime1').val() + ' ' + $('#startTime2').val()+':00'
                const end = $('#endTime1').val() + ' ' + $('#endTime2').val()+':00'
                const typeIdList = res
                const name = $('#item-name').val()
                const desc = $('#sales-desc').prop("checked")
                console.log(desc)
                console.log('ready..')
                // const url = '/dashboard/indents?pageNum='+curPage+'&start='+start+'&end='+end+'&typeList='+typeIdList
                const url = '/dashboard/typeItems'
                const obj = {
                    "pageNum": curPage,
                    "typeIdList": typeIdList,
                    // "start": start,
                    // "end": end,
                    // "name": name,
                    "salesDesc": desc
                }
                console.log(obj)
                console.log(url)
                $.ajax({
                    url:"/dashboard/typeItems",
                    type:"get",
                    data: obj,
                    contentType:"application/json;charset=utf-8",
                    success:function(data){
                        console.log(data)
                        const newContent = $(data).find("#sales-table")
                        console.log(newContent)
                        $("#sales-table").replaceWith(newContent)
                        $('#foot-page').replaceWith($(data).find("#foot-page"))
                    }
                })
            })

          $('#submit').click(function () {

            console.log($('#curPage').val())
            console.log($('#startTime1').val()+' '+$('#startTime2').val())
            console.log($('#endTime1').val()+' '+$('#endTime2').val())
            //×用复制的 不是x
            let text = $('.selection').find('.select2-selection__choice').text().split('×')
            text.splice(0,1)
            console.log(text)
            let res = []
            for (let i = 0;i < text.length;i++){
              for (const a in arr) {
                if (arr[a].name==text[i]){
                  //只要id
                  res.push(arr[a].id)
                  break
                }
              }
            }
              res=res.map(Number)
              console.log(res)
              const curPage = $('#curPage').val()
              const start = $('#startTime1').val() + ' ' + $('#startTime2').val()+':00'
              const end = $('#endTime1').val() + ' ' + $('#endTime2').val()+':00'
              const typeIdList = res
              const name = $('#item-name').val()
              const desc = $('#sales-desc').prop("checked")
              console.log(desc)
              console.log('ready..')
              // const url = '/dashboard/indents?pageNum='+curPage+'&start='+start+'&end='+end+'&typeList='+typeIdList
              const url = '/dashboard/indents'
              const obj = {
                  "pageNum": curPage,
                  "typeIdList": typeIdList,
                  "start": start,
                  "end": end,
                  "name": name,
                  "salesDesc": desc
              }
              console.log(obj)
              console.log(url)
              $.ajax({
                url:"/dashboard/indents",
                type:"get",
                data: obj,
                contentType:"application/json;charset=utf-8",
                success:function(data){
                    console.log(data)
                    const newContent = $(data).find("#sales-table")
                    console.log(newContent)
                    $("#sales-table").replaceWith(newContent)
                    $('#foot-page').replaceWith($(data).find("#foot-page"))
                }
              })
              $('#time-limit').text(start+' - '+end)
          })
        });

    </script>
    <script>
      $('.select2').select2(
      {
        theme: 'bootstrap4',
      });
      $('.select2-multi').select2(
      {
        multiple: true,
        theme: 'bootstrap4',
      });
      $('.drgpicker').daterangepicker(
      {
        singleDatePicker: true,
        timePicker: false,
        showDropdowns: true,
        locale:
        {
          format: 'YYYY-MM-DD'
        }
      });
      $('.time-input').timepicker(
      {
        'scrollDefault': 'now',
        'zindex': '9999' /* fix modal open */
      });
      /** date range picker */
      if ($('.datetimes').length)
      {
        $('.datetimes').daterangepicker(
        {
          timePicker: true,
          startDate: moment().startOf('hour'),
          endDate: moment().startOf('hour').add(32, 'hour'),
          locale:
          {
            format: 'M/DD hh:mm A'
          }
        });
      }
      var start = moment().subtract(29, 'days');
      var end = moment();

      function cb(start, end)
      {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
      }
      $('#reportrange').daterangepicker(
      {
        startDate: start,
        endDate: end,
        ranges:
        {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
      }, cb);
      cb(start, end);
      $('.input-placeholder').mask("00/00/0000",
      {
        placeholder: "__/__/____"
      });
      $('.input-zip').mask('00000-000',
      {
        placeholder: "____-___"
      });
      $('.input-money').mask("#.##0,00",
      {
        reverse: true
      });
      $('.input-phoneus').mask('(000) 000-0000');
      $('.input-mixed').mask('AAA 000-S0S');
      $('.input-ip').mask('0ZZ.0ZZ.0ZZ.0ZZ',
      {
        translation:
        {
          'Z':
          {
            pattern: /[0-9]/,
            optional: true
          }
        },
        placeholder: "___.___.___.___"
      });
      // editor
      var editor = document.getElementById('editor');
      if (editor)
      {
        var toolbarOptions = [
          [
          {
            'font': []
          }],
          [
          {
            'header': [1, 2, 3, 4, 5, 6, false]
          }],
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [
          {
            'header': 1
          },
          {
            'header': 2
          }],
          [
          {
            'list': 'ordered'
          },
          {
            'list': 'bullet'
          }],
          [
          {
            'script': 'sub'
          },
          {
            'script': 'super'
          }],
          [
          {
            'indent': '-1'
          },
          {
            'indent': '+1'
          }], // outdent/indent
          [
          {
            'direction': 'rtl'
          }], // text direction
          [
          {
            'color': []
          },
          {
            'background': []
          }], // dropdown with defaults from theme
          [
          {
            'align': []
          }],
          ['clean'] // remove formatting button
        ];
        var quill = new Quill(editor,
        {
          modules:
          {
            toolbar: toolbarOptions
          },
          theme: 'snow'
        });
      }
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function()
      {
        'use strict';
        window.addEventListener('load', function()
        {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form)
          {
            form.addEventListener('submit', function(event)
            {
              if (form.checkValidity() === false)
              {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>
    <script>
      var uptarg = document.getElementById('drag-drop-area');
      if (uptarg)
      {
        var uppy = Uppy.Core().use(Uppy.Dashboard,
        {
          inline: true,
          target: uptarg,
          proudlyDisplayPoweredByUppy: false,
          theme: 'dark',
          width: 770,
          height: 210,
          plugins: ['Webcam']
        }).use(Uppy.Tus,
        {
          endpoint: 'https://master.tus.io/files/'
        });
        uppy.on('complete', (result) =>
        {
          console.log('Upload complete! We’ve uploaded these files:', result.successful)
        });
      }
    </script>
    <script th:src="@{/dash/js/apps.js}"></script>
  </body>
</html>
